<template>
	<!-- 首页悬浮按钮 -->
	<view class="nav-index-button" :style="{ bottom: `${bottom}rpx`, right: `${right}rpx` }" @tap.stop="changeTabbarPage(0)">
		<view class="nav-index-button__content">
			<view class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-cool-bg-color-7">
				<view class="tn-icon-home-vertical-fill"></view>
			</view>
		</view>

		<view class="nav-index-button__meteor">
			<view class="nav-index-button__meteor__wrapper">
				<view
					v-for="(item, index) in 6"
					:key="index"
					class="nav-index-button__meteor__item"
					:style="{
						transform: `rotateX(${-60 + 30 * index}deg) rotateZ(${-60 + 30 * index}deg)`,
					}">
					<view class="nav-index-button__meteor__item--pic"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "nav-index-button",
	props: {
		// 距离底部的距离
		bottom: {
			type: [Number, String],
			default: 300,
		},
		// 距离右边的距离
		right: {
			type: [Number, String],
			default: 75,
		},
		// 首页地址
		indexPath: {
			type: String,
			default: "/pages/index/index",
		},
	},
	methods: {
		// 跳转回首页
		navIndex() {
			// 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
			const pages = getCurrentPages();
			if (pages && pages.length > 0) {
				const indexPath = this.indexPath || "/pages/index/index";
				const firstPage = pages[0];
				if (pages.length == 1 && (!firstPage.route || firstPage.route != indexPath.substring(1, indexPath.length))) {
					uni.reLaunch({
						url: indexPath,
					});
				} else {
					uni.navigateBack({
						delta: 1,
					});
				}
			} else {
				uni.reLaunch({
					url: indexPath,
				});
			}
		},
		// 切换界面
		changeTabbarPage(index) {
			this.$emit("changeTabbarPage", index);
		},
	},
};
</script>

<style lang="scss" scoped>
.nav-index-button {
	position: fixed;
	animation: suspension 3s ease-in-out infinite;
	z-index: 999999;

	&__content {
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		&--icon {
			width: 100rpx;
			height: 100rpx;
			font-size: 60rpx;
			border-radius: 50%;
			margin-bottom: 18rpx;
			position: relative;
			z-index: 1;
			transform: scale(0.85);

			&::after {
				content: " ";
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg6.png);
			}
		}
	}

	&__meteor {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 100rpx;
		height: 100rpx;
		transform-style: preserve-3d;
		transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);

		&__wrapper {
			width: 100rpx;
			height: 100rpx;
			transform-style: preserve-3d;
			animation: spin 20s linear infinite;
		}

		&__item {
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			border-radius: 1000rpx;
			left: 0;
			top: 0;

			&--pic {
				display: block;
				width: 100%;
				height: 100%;
				background: url(https://resource.tuniaokj.com/images/cool_bg_image/arc3.png) no-repeat center center;
				background-size: 100% 100%;
				animation: arc 4s linear infinite;
			}
		}
	}
}

@keyframes suspension {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-0.8rem);
	}
}

@keyframes spin {
	0% {
		transform: rotateX(0deg);
	}

	100% {
		transform: rotateX(-360deg);
	}
}

@keyframes arc {
	to {
		transform: rotate(360deg);
	}
}
</style>
